<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>公告发布</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-button type="primary" size="medium" @click="addDialogVisible = true"
        >新增公告</el-button
      >
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="50"> </el-table-column>
        <el-table-column prop="noticeTitle" label="公告名"> </el-table-column>
        <el-table-column prop="noticeContent" label="公告内容">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>{{ scope.row.noticeContent }}</p>
              <div slot="reference">
                <el-tag>{{ scope.row.noticeContent }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="noticeType" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.noticeType == '1'">上架</span>
            <span v-else>下架</span>
          </template>
        </el-table-column>
        <el-table-column label="修改">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-edit"
              @click="clickEditNews(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!--添加公告  -->
    <el-dialog
      title="添加公告"
      :visible.sync="addDialogVisible"
      @close="closeAddNews"
    >
      <el-row :gutter="20">
        <el-col :span="3">标题：</el-col>
        <el-col :span="6"
          ><el-input
            v-model="queryInfo.noticeTitle"
            placeholder="请输入内容"
          ></el-input
        ></el-col>
      </el-row>
      <el-card style="height: 610px;">
        <!--饿了么上传组件，也可以用input代替，都是隐藏起来 :show-file-list="false" :http-request="to_upload_img"-->
        <el-upload
          class="avatar-uploader"
          action="https://up-z2.qiniup.com"
          :data="qiniuForm"
          :on-success="uploadEditorSuccess"
          :before-upload="beforeEditorUpload"
          :file-list="fileLists"
          style="display: none"
        >
          <i class="el-icon-plus avatar-uploader-icon" id="imgInput"></i>
        </el-upload>
        <quill-editor
          v-model="queryInfo.noticeContent"
          ref="myQuillEditor"
          style="height: 500px;"
          :options="editorOption"
        >
          <!-- 自定义toolar -->
          <div id="toolbar" slot="toolbar" style="line-height: 0px;">
            <!-- Add a bold button -->
            <button class="ql-bold" title="加粗">加粗</button>
            <button class="ql-italic" title="斜体">斜体</button>
            <button class="ql-header" value="1" title="标题1"></button>
            <button class="ql-header" value="2" title="标题2"></button>
            <button
              class="ql-image"
              value="bullet"
              title="图片"
              @click="ql_image"
            ></button>
            <!-- <button class="ql-underline" title="下划线">下划线</button>
                                    <button class="ql-strike" title="删除线">删除线</button> -->
            <!-- <button class="ql-blockquote" title="引用"></button>
                                    <button class="ql-code-block" title="代码"></button> -->
            <!--Add list -->
            <!-- <button class="ql-list" value="ordered" title="有序列表"></button>
                                    <button class="ql-list" value="bullet" title="无序列表"></button> -->
            <!-- <button class="ql-video" value="bullet" title="视频"></button> -->
            <!-- <button class="ql-clean" value="bullet" title="清除字体样式"></button>
                                    <button class="ql-formula" value="bullet" title="公式"></button> -->
            <!-- Add font size dropdown -->
            <select class="ql-header" title="段落格式">
              <option selected>段落</option>
              <option value="1">标题1</option>
              <option value="2">标题2</option>
              <option value="3">标题3</option>
              <option value="4">标题4</option>
              <option value="5">标题5</option>
              <option value="6">标题6</option>
            </select>
            <select class="ql-size" title="字体大小">
              <option value="14px">14px</option>
              <option value="16px" selected>16px</option>
              <option value="18px">18px</option>
              <option value="20px">20px</option>
              <option value="24px">24px</option>
              <option value="28px">28px</option>
            </select>
            <select class="ql-font" title="字体">
              <option value="SimSun">宋体</option>
              <option value="SimHei">黑体</option>
              <option value="Microsoft-YaHei" selected>微软雅黑</option>
              <option value="KaiTi">楷体</option>
              <option value="FangSong">仿宋</option>
              <option value="Arial">Arial</option>
            </select>
            <!-- Add subscript and superscript buttons -->
            <select class="ql-color" value="color" title="字体颜色"></select>
            <select
              class="ql-background"
              value="background"
              title="背景颜色"
            ></select>
            <select class="ql-align" value="align" title="对齐"></select>
            <button class="ql-clean" title="还原"></button>
            <!-- You can also add your own -->
          </div>
        </quill-editor>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addTrue()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改公告 -->
    <el-dialog title="修改公告" :visible.sync="editDialogVisible">
      <el-form :model="editNewsForm">
        <el-form-item label="类型">
          <el-input
            v-model="editNewsForm.type"
            autocomplete="off"
            placeholder="请输入类型(1：正常，2：失效)"
          ></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input
            v-model="editNewsForm.noticeTitle"
            autocomplete="off"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-card style="height: 610px;">
            <!--饿了么上传组件，也可以用input代替，都是隐藏起来 :show-file-list="false" :http-request="to_upload_img"-->
            <el-upload
              class="avatar-uploader"
              action="https://up-z2.qiniup.com"
              :data="qiniuForm"
              :on-success="uploadEditorSuccess"
              :before-upload="beforeEditorUpload"
              :file-list="fileLists"
              style="display: none"
            >
              <i class="el-icon-plus avatar-uploader-icon" id="imgInput"></i>
            </el-upload>
            <quill-editor
              v-model="editNewsForm.noticeContent"
              ref="myQuillEditor"
              style="height: 500px;"
              :options="editorOption"
            >
              <!-- 自定义toolar -->
              <div id="toolbar" slot="toolbar" style="line-height: 0px;">
                <!-- Add a bold button -->
                <button class="ql-bold" title="加粗">加粗</button>
                <button class="ql-italic" title="斜体">斜体</button>
                <button class="ql-header" value="1" title="标题1"></button>
                <button class="ql-header" value="2" title="标题2"></button>
                <button
                  class="ql-image"
                  value="bullet"
                  title="图片"
                  @click="ql_image"
                ></button>
                <!-- <button class="ql-underline" title="下划线">下划线</button>
                                    <button class="ql-strike" title="删除线">删除线</button> -->
                <!-- <button class="ql-blockquote" title="引用"></button>
                                    <button class="ql-code-block" title="代码"></button> -->
                <!--Add list -->
                <!-- <button class="ql-list" value="ordered" title="有序列表"></button>
                                    <button class="ql-list" value="bullet" title="无序列表"></button> -->
                <!-- <button class="ql-video" value="bullet" title="视频"></button> -->
                <!-- <button class="ql-clean" value="bullet" title="清除字体样式"></button>
                                    <button class="ql-formula" value="bullet" title="公式"></button> -->
                <!-- Add font size dropdown -->
                <select class="ql-header" title="段落格式">
                  <option selected>段落</option>
                  <option value="1">标题1</option>
                  <option value="2">标题2</option>
                  <option value="3">标题3</option>
                  <option value="4">标题4</option>
                  <option value="5">标题5</option>
                  <option value="6">标题6</option>
                </select>
                <select class="ql-size" title="字体大小">
                  <option value="14px">14px</option>
                  <option value="16px" selected>16px</option>
                  <option value="18px">18px</option>
                  <option value="20px">20px</option>
                  <option value="24px">24px</option>
                  <option value="28px">28px</option>
                </select>
                <select class="ql-font" title="字体">
                  <option value="SimSun">宋体</option>
                  <option value="SimHei">黑体</option>
                  <option value="Microsoft-YaHei" selected>微软雅黑</option>
                  <option value="KaiTi">楷体</option>
                  <option value="FangSong">仿宋</option>
                  <option value="Arial">Arial</option>
                </select>
                <!-- Add subscript and superscript buttons -->
                <select
                  class="ql-color"
                  value="color"
                  title="字体颜色"
                ></select>
                <select
                  class="ql-background"
                  value="background"
                  title="背景颜色"
                ></select>
                <select class="ql-align" value="align" title="对齐"></select>
                <button class="ql-clean" title="还原"></button>
                <!-- You can also add your own -->
              </div>
            </quill-editor>
          </el-card>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editNews()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 引入七牛云
import * as qiniu from "qiniu-js";
import { Quill, quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
//引入font.css
// import "../assets/css/font.css";
// 自定义字体大小
let Size = Quill.import("attributors/style/size");
Size.whitelist = ["14px", "16px", "18px", "20px", "24px", "28px"];
Quill.register(Size, true);
// 自定义字体类型
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
  "宋体",
  "黑体",
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts;
Quill.register(Font, true);
export default {
  data() {
    return {
      qiniuForm: {},
      fileLists: [],
      // 富文本
      queryInfo: {
        noticeTitle: "",
        noticeContent: null,
      },

      editorOption: {
        placeholder: "请输入内容",
        theme: "snow", // or 'bubble'
        modules: {
          toolbar: { container: "#toolbar" },
        },
      },
      // 存储七牛云信息
      qn: {
        token: "",
        key: "",
      },
      dialogVisible: false,
      dialogImageUrl: "",
      // 修改公告
      editNewsForm: {
        noticeTitle: "",
        noticeContent: "",
        type: "",
        id: "",
      },
      //添加公告
      queryInfo: {
        pageIndex: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [],
      addDialogVisible: false,
      editDialogVisible: false,
    };
  },
  components: {
    quillEditor,
  },
  created() {
    this.getmsglist();
  },
  mounted() {
    this.getToken();
  },
  methods: {
    // 富文本上传图片到七牛云
    ql_image(e) {
      this.$refs.myQuillEditor.quill
        .getModule("toolbar")
        .addHandler("image", this.imgHandler);
    },
    imgHandler(state) {
      //点击图片ICON触发事件
      if (state) {
        // 选择并上传一张图片
        let fileInput = document.getElementById("imgInput");
        fileInput.click(); // 加一个触发事件
      }
    },
    beforeEditorUpload(file) {
      let keys = file.name;
      this.qiniuForm.key = new Date().getTime() + keys;
    },
    uploadEditorSuccess(response, file) {
      //富文本上传图片成功后回调函数
      var qiniuImageUrl = "http://thap.bee360.com.cn/" + this.qiniuForm.key; //七牛图片地址
      // 将图片添加到富文本内容区域
      this.addRange = this.$refs.myQuillEditor.quill.getSelection();
      // 调用编辑器的 insertEmbed 方法，插入URL
      this.$refs.myQuillEditor.quill.insertEmbed(
        this.addRange !== null ? this.addRange.index : 0,
        "image",
        qiniuImageUrl,
        Quill.sources.USER
      );
    },

    // 点击修改按钮回显
    clickEditNews(row) {
      this.editNewsForm = row;
      // console.log(row)
      this.editDialogVisible = true;
    },
    //   修改公告
    async editNews() {
      var regex = new RegExp("<img", "gi");
      this.editNewsForm.noticeContent = this.editNewsForm.noticeContent.replace(
        regex,
        '<img style="width: 100%;"'
      );
      var html =
        '<div ref="div" id="div" style="width:100%;text-align:center;overflow:auto">' +
        this.editNewsForm.noticeContent +
        "</div>";
      var list = this.fileLists;
      var listfile = "";
      for (var i = 0; i < list.length; i++) {
        listfile += list[i].url + ",";
      }
      if (listfile != "") {
        listfile = listfile.substring(0, listfile.length - 1);
      }
      const { data: res } = await this.$http.post(
        "notice/updateNotice",
        this.httputil(this.editNewsForm)
      );
      if (res.code !== 200) return this.$message.error("修改失败");
      this.$message.success("修改成功");
      this.getmsglist();
      this.editDialogVisible = false;
    },

    //   关闭添加对话框时触发 重置添加内容
    closeAddNews() {
      this.queryInfo.noticeTitle = "";
      this.queryInfo.noticeContent = "";
    },
    //   添加公告
    async addTrue() {
      var regex = new RegExp("<img", "gi");
      this.queryInfo.noticeContent = this.queryInfo.noticeContent.replace(
        regex,
        '<img style="width: 100%;"'
      );
      var html =
        '<div ref="div" id="div" style="width:100%;text-align:center;overflow:auto">' +
        this.queryInfo.noticeContent +
        "</div>";
      var list = this.fileLists;
      var listfile = "";
      for (var i = 0; i < list.length; i++) {
        listfile += list[i].url + ",";
      }
      if (listfile != "") {
        listfile = listfile.substring(0, listfile.length - 1);
      }
      const { data: res } = await this.$http.post(
        "notice/addNotice",
        this.httputil(this.queryInfo)
      );
      if (res.code !== 200) return this.$message.error("添加失败");
      this.$message.success("添加成功");
      this.getmsglist();
      this.addDialogVisible = false;
    },
    //获取公告列表
    async getmsglist() {
      const { data: res } = await this.$http.post(
        "notice/listPagedNotice",
        this.httputil(this.queryInfo)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.tableData = res.data.b360Notice;
      this.total = res.data.count;
    },
    // 页面数量发生改变
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getmsglist();
    },
    // 页数发生改变
    handleCurrentChange(newCurrent) {
      this.queryInfo.pageIndex = newCurrent;
      this.getmsglist();
    },
    //页面加载完成后获取tokend
    async getToken() {
      const { data: res } = await this.$http.post(
        "currencyAudit/getQiniuToken"
      );
      if (res.code !== 200) return this.$message.error("获取失败");
      this.qiniuForm.token = res.data.uptoken;
    },
  },
};
</script>
